<template>
    <div>
        <el-form-item><el-button type="text">收费统计</el-button></el-form-item>
        
        <div ref="myChart" id="myChart" :style="{ width: '800px', height: '400px' }"></div>
        
        <el-form-item><el-button type="text">设备管理</el-button></el-form-item>        
        <div ref="barChart" id="barChart" :style="{ width: '400px', height: '200px' }"></div>
    </div>
</template>

<script setup>
import { cardProps } from 'element-plus';
import { ref, getCurrentInstance, onMounted } from 'vue'
const size = ref < 'default' | 'large' | 'small' > ('default')
let ownerVehicle = ref({
    value1: ''
})
let myChart = ref(null)

let barChart = ref(null)
let instance = getCurrentInstance()
let echarts = instance.appContext.config.globalProperties.$echarts


onMounted(() => {
    let chart = echarts.init(document.getElementById('myChart'))

    let option = {
        xAxis: {
            type: 'category',
            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [820, 100, 250, 90, 400, 240, 300, 510, 310, 510, 610, 710],
                type: 'line'
            },
            {
                data: [720, 730, 260, 790, 250, 440, 500, 460, 410, 510, 710, 610],
                type: 'line'
            }
        ]
    }

    chart.setOption(option)



    let barChart = echarts.init(document.getElementById('barChart'))
    let baroption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 40, name: '正常百分比' },
                    { value: 25, name: '故障百分比' },
                    { value: 35, name: '离线百分比' }
                ]
            }
        ]
    }

    baroption && barChart.setOption(baroption)

})

</script>

<style lang="css" scoped></style>